<template>
  <div style="height:100%;">
    <div class="message-header">
      通讯录
    </div>
    <div class="message-body">
      <div class="message-content">
<!--        <div class="message-body-side">-->
<!--          <div-->
<!--            v-for="(item, index) in leftSides"-->
<!--            :key="index"-->
<!--            :class="leftType==item.infoType? 'side-item-select' : 'side-item-default'"-->
<!--            class="side-item">-->
<!--            <img-->
<!--              src="@/assets/img/structure.png"-->
<!--              alt="">-->
<!--            <span>{{ item.name }}</span>-->
<!--          </div>-->
<!--        </div>-->
        <div class="message-body-content">
          <v-structure
            :v-structure-width="structureWidth"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VStructure from './organizationStructure'
export default {
  name: "addressBookIndex",
  components: {
    VStructure
  },
  data() {
    return {
      leftType: 'addressBookStructure',
      leftSides: [
        {
          name: '组织架构',
          crmType: 'salesEnter',
          infoType: 'addressBookStructure',
          hidden: false
        }
      ],
      structureWidth: null
    }
  },
  mounted() {
    window.onresize = () => {
      this.structureWidth = document.getElementsByClassName('message-body-content')[0].clientWidth
    }
    this.$nextTick(function() {
      this.structureWidth = document.getElementsByClassName('message-body-content')[0].clientWidth
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
  .message-header {
    height: 60px;
    font-size: 18px;
    padding: 0 20px;
    line-height: 60px;
  }
  .message-body {
    position: relative;
    height: calc(100% - 60px);
  }
  .message-content {
    position: relative;
    height: 100%;
  }

  .message-body-side {
    width: 200px;
    font-size: 14px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    overflow-y: auto;
  .side-item {
    position: relative;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
  i {
    color: #999;
  }
  }
  }
  .message-body-content {
    /*margin-left: 210px;*/
    height: 100%;
    overflow: auto;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
  }

  .side-item-default {
    color: #333;
    border-right: 2px solid transparent;
  }

  .side-item-select {
    color: #409eff;
    border-right: 2px solid #46cdcf;
    background-color: #ecf5ff;
  }

  .block {
    padding: 10px;
  }

  .el-badge /deep/ .el-badge__content {
    border: none;
    top: 0;
  }

  .el-badge {
    position: absolute;
    right: 15px;
    top: 0;
  }
</style>
